


Discord (Dark Theme) Work Skin Guide/Preview

by Heterochromia_Mars



Category: No Fandom
Genre: CSS, Chatting & Messaging, Fanwork Research & Reference Guides, HTML, Work Skin
Language: English
Status: Completed
Published: 2017-09-20
Updated: 2017-09-20
Packaged: 2018-12-31 22:28:26
Rating: Not Rated
Warnings: No Archive Warnings Apply
Chapters: 1
Words: 558
Publisher: archiveofourown.org
Story URL: https://archiveofourown.org/works/12142470
Author URL: https://archiveofourown.org/users/Heterochromia_Mars/pseuds/Heterochromia_Mars
Summary: a work skin that mimics the program Discord (for chatfics or fics that feature use of it)made this skin over a couple days; it won't look good on mobile or with creator's style disabled and the discord font isn't one most people have installed but it mimics a discord server pretty well and the html is pretty easy to customise!disclaimer: i have no idea what im doing





	Discord (Dark Theme) Work Skin Guide/Preview

**Author's Note:**

> change log  
> > ~~emoji image class (22x22px), wumboji image class (35x35px)~~  
>  > ~~bluetxt for fake links and image filenames above images~~  
>  > ~~style actual links~~  
>  > ~~style bold text~~  
>  > ~~name and link hover underline~~
> 
> to do  
> > fix img max height  
> > '@/tag' class  
> > restyle bold text outside of discord window  
> > fix indent of longer messages  
> > 'channel notes/desc' class  
> > '(edited)' class  
> > 'pinned message' notice class  
> > 'changed group DM name' notice class  
> > find better font  
> > optional timestamps  
> > customisable members + channel lists ?  
> > light theme version  
> > mobile version  
> 

  
# general  
  


coolest person  
the channel title can say anything   
for multi word channels use underscores (_) in place of spaces  
for DMs/group DMs delete the bighash span and #, and add 3x '&n bs p;' (without spaces) in its place  


* * *

cool person #2  
this is a single message with **bold,** _italics_ and ~~strikethrough~~  


* * *

cooler person  
this is a series of messages in succession. the first message uses the text class (sent for an image)  
everything after the first message uses text2 (sent2 for an image)  
you can add emojis using img src tags and the 'emoji' image class  
discord's emojis are twitter emojis, so look for those on sites like emojipedia    
in a message that only contains emojis you can use the 'wumboji' instead of 'emoji' image class  
  
this will make them bigger, the way discord does   
you can also use any image as a 'custom emoji,' but they should be square or they will stretch   


* * *

third even cooler person~  
  
you can also add images. they'll be automatically resized to the discord standard 400px width  
make sure you include the 'sent' class  
and don't forget to add a horizontal rule tag after every message block (between messagers)  


* * *

trying to be cool but failing   
if your image message is further down in a message block, use the 'sent2' image class  
below is what a fake link looks like, using the 'blulink' span class  
http://voldemort-in-a-tutu.com.au/  
you can also add this before an image if you want to include a filename for humour or some other reason  
http://not-a-real-image-host.com/tomato_realisation.gif  
  


* * *

not cool at all  
this is what a real link looks like <https://i.gyazo.com/2852a0cd08ff34aca35f88638ecb5d7a.gif>  
for authenticity the link text should just be the actual url of the link  


* * *

casually cool dude  
the padding for extremely, exceedingly, exceptionally, especially, tremendously, immensely, vastly, hugely; extraordinarily, extra, excessively, overly, abundantly long messages (longer than one line) is currently broken but not due to "display: inline"; i'm looking into this and would appreciate any help  
the same is also true for inordinately, singularly, significantly, distinctly, outstandingly, uncommonly, unusually, decidedly, particularly, eminently, supremely, highly, remarkably, really long messages in a text2 span  


* * *

a new challenger approaches  
the text input field below is an image  
alternates and a guide to custom-making one are at the bottom of this page  


* * *

 

 

* * *

**[CSS code](https://pastebin.com/Tcxc8rbf)**

**[HTML code](https://pastebin.com/6AdJKUha)**

 

* * *

role/name colours:  


top row is numbered role1-10, with the bottom row numbered role1dark-role10dark  
roledefault is white (#FFFFFF)

you can also add roles with custom hex colours and name them by group (eg. team cap/team iron man), by character or by colour

* * *

alternate images for the input field:  
  
  
  


if you need the channel name to say something else, you can make a new server on discord and name a channel whatever you want, then screenshot the text input field. (make sure your members panel is open so that the input field isn't too wide)

the emoji displayed on the right-hand side will also change when moused over, so you can customise that if you want

if you need a DM/group DM name but don't have a group that you can rename willy-nilly you can do the above and edit out the # and underscores with something like photoshop, SAI or [pixlr](https://pixlr.com/editor/) (which is online and free to use).

* * *

emoji resources: [emojipedia,](https://emojipedia.org/) [discord (twitter) emoji](http://twitter.github.io/twemoji/2/test/preview.html)


End file.
